<template>
  <div class="ishow">
    <p class="txt">最受HR青睐的简历，高效更专业!</p>
    <p class="littleTxt">优秀的简历排版设计，亮点更突出!</p>
  </div>

  <n-carousel
    :space-between="50"
    :loop="true"
    autoplay="true"
    interval="3600"
    centered-slides="true"
    slides-per-view="auto"
    draggable
    dot-type="line"
    effect="card"
    @click="resumeGeneraion"
  >
    <n-carousel-item v-for="(item, index) in carouselImg" :key="index">
      <img class="carousel-img" :src="item" />
    </n-carousel-item>
  </n-carousel>

  <div class="list">
    <div class="wp">
      <div class="title">
        <svg-icon name="line"></svg-icon>优质简历模板<svg-icon
          name="line"
        ></svg-icon>
      </div>
      <div class="e">
        <strong>通用简历模板</strong>

        <div class="premiumResumeTemplates">
          <div class="list" v-for="(item, index) in templateImg">
            <img :key="index" :src="item" alt="优质简历模板" ref="img" />
            <n-button class="edit" type="info" @click="editResume(index)">
              编辑
            </n-button>
            <n-button
              class="preview"
              type="success"
              @click="showBigImage(index)"
            >
              预览
            </n-button>
          </div>

          <BigImg
            :visible="photoVisible"
            :url="bigImgUrl"
            @closeClick="
              () => {
                photoVisible = false
              }
            "
          ></BigImg>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BigImg from "./components/BigImg.vue"
export default {
  data() {
    return {
      photoVisible: false,
      bigImgUrl: "",
      index: "",
    }
  },

  components: {
    BigImg,
  },

  methods: {
    showBigImage(index) {
      //点击图片函数，点击后，把photoVisible设置成truse
      this.photoVisible = true
      // 把对应的图片地址存入bigImgUrl
      this.bigImgUrl = this.$refs.img[index].src
    },
    resumeGeneraion() {
      //跳转至在线简历生成
      this.$router.push({
        path: "/resume-guidance/resume-generation",
      })
    },

    editResume(index) {
      this.index = index
      switch (this.index) {
        case 0:
          this.$router.push({
            path: "/resume-guidance/resume-edit-one",
            query: {
              index: this.index,
            },
          })

          break
        case 1:
          this.$router.push({
            path: "/resume-guidance/resume-edit-two",
            query: {
              index: this.index,
            },
          })
          break
        case 2:
          this.$router.push({
            path: "/resume-guidance/resume-edit-three",
            query: {
              index: this.index,
            },
          })
          break
        default:
          console.log("未找到页面~~~")
          break
      }
    },
  },

  computed: {
    carouselImg() {
      return this.$store.state.resume.resumeList.carouselImg
    },

    templateImg() {
      return this.$store.state.resume.resumeList.templateImg
    },
  },
}
</script>

<style lang="scss" scoped>
.ishow {
  height: 280px;
  background: url(../../assets/imgs/resume/resume.jpg);
}
.txt {
  font-size: 40px;
  color: #fff;
  padding-left: 110px;
  padding-top: 98px;
}
.littleTxt {
  font-size: 25px;
  color: rgb(204, 239, 248);
  padding-left: 110px;
  padding-top: 15px;
}
.carousel-img {
  padding-left: 370px;
  padding-bottom: 6px;
  width: 28%;
  height: 87%;
  object-fit: cover;
}
.list {
  padding: 38px 0 30px;
  background: #f7f7f7;
}
.wp {
  position: relative;
  width: 996px;
  margin: 0 auto;
}
.list .title {
  font-size: 32px;
  text-align: center;
  margin-bottom: 30px;
}
.list strong {
  display: block;
  line-height: 50px;
  height: 50px;
  font-size: 20px;
  font-weight: bold;
  color: #080808;
  margin-top: 45px;
  border-bottom: 1px solid #c9c9c9;
}
.premiumResumeTemplates {
  display: flex;
  justify-content: space-around;
  padding: 20px 20px;
  .list {
    position: relative;
    &:hover .edit {
      display: block; // 设置父元素hover时子元素的样式
    }
    &:hover .preview {
      display: block; // 设置父元素hover时子元素的样式
    }
    img {
      width: 260px;
    }
    .edit {
      position: absolute;
      left: 50px;
      bottom: 240px;
      display: none;
    }

    .preview {
      position: absolute;
      left: 160px;
      bottom: 240px;
      display: none;
    }
  }
}
</style>
